<template>
  <div class="page">
    <!-- header -->
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="驾校详情"
    >
      <template #right>
        <van-icon v-if="favorite" name="star-o" size="18" @click="enshrine" />
        <van-icon
          v-else
          name="star"
          color="rgb(252, 184, 20)"
          size="18"
          @click="cancel"
        />
      </template>
    </van-nav-bar>
    <div class="detail-page">
      <div class="detail-banner" @click="href('/DetailedPhotos')">
        <van-swipe :autoplay="5000" class="detail-swiper" @change="onChange">
          <van-swipe-item>
            <!-- <img :v-lazy="schoolDetails.imgtx" /> -->
            <img
              style="width:100%;height:100%;"
              :src="schoolDetails.imgtx"
              alt
            />
          </van-swipe-item>
          <template>
            <div class="custom-indicator">{{ schoolDetails.imgnums }}</div>
          </template>
        </van-swipe>
      </div>
      <div class="in-panel">
        <div class="sch-grid">
          <div class="sch-head">
            <div class="sch-header">
              <div class="font-name">{{ schoolDetails.name }}</div>
              <img src="../../assets/ver-icon.png" alt />
            </div>
            <img
              @click="Phone(schoolDetails.phone)"
              class="sch-img"
              src="../../assets//images//dianhua1.png"
              alt=""
            />
          </div>
          <div class="in-tags">
            <div class="tag-item">
              <img src="../../assets/vv1.png" alt />
              <span>身份认证</span>
            </div>
            <div class="tag-item">
              <img src="../../assets/vv2.png" alt />
              <span>授权认证</span>
            </div>
            <div class="tag-item">
              <img src="../../assets/vv3.png" alt />
              <span>营业执照认证</span>
            </div>
          </div>
        </div>
      </div>
      <div class="in-panel" @click="href('/Cartography')">
        <van-cell
          class="manager-cell"
          center
          icon="map-marked"
          :title="schoolDetails.address"
        ></van-cell>
      </div>

      <!-- 评论 -->
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">学员评论</div>
          <div @click="href('/AllComments')" class="more">
            全部评论({{ length }})
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="acc-raty">
          <div class="raty-box">
            <van-rate
              v-model="comment.xj"
              readonly
              void-icon="star"
              void-color="#eee"
            />
            <span>{{ comment.xj }}</span>
          </div>
          <div class="raty-val">
            <div class="item">
              服务：
              <span>{{ comment.fw }}</span>
            </div>
            <!-- <div class="item">
              教学：
              <span>5.0</span>
            </div>
            <div class="item">
              收费：
              <span>5.0</span>
            </div>-->
            <div class="item">
              设施：
              <span>{{ comment.hj }}</span>
            </div>
          </div>
        </div>

        <van-cell
          class="nBss-cell"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <template #icon>
            <div class="nb-avatar">
              <img :src="item.img" alt />
            </div>
          </template>
          <template>
            <div>
              <div class="info">
                <div class="author">{{ item.name }}</div>
                <div class="comment-attr">
                  <div class="postTime">{{ item.createTime }}</div>
                  <div class="raty-box">
                    <van-rate
                      v-model="item.ffzl"
                      void-icon="star"
                      readonly
                      void-color="#eee"
                    />
                    <span>{{ item.ffzl }}</span>
                  </div>
                </div>
              </div>
              <div class="content">
                <div class="text">
                  <span>{{ item.remark }}</span>
                </div>
                <div class="bottom-icon">
                  <!-- <div class="icon">
                    <van-icon name="eye-o" />
                    {{ item.djl }}
                  </div>
                  <div class="icon">
                    <van-icon name="like-o" />
                    {{ item.scl }}
                  </div>-->
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </div>

      <!-- 班型 -->
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">班型</div>
          <div @click="href('/AllBanks')" class="more">
            全部班型({{ banks }})
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="in-panel-classs">
          <van-cell
            class="class-cell"
            v-for="(item, i) in classlists"
            :key="i"
            @click="href('/BanksDetails', item.id)"
          >
            <template #icon>
              <div class="cl-style">{{ item.stageType }}</div>
            </template>
            <template #title>
              <div class="cl-head justify">
                <div class="cl-tit">{{ item.stageName }}</div>
                <div class="cl-price">￥{{ item.classPriceTotal }}</div>
              </div>
              <div class="cl-attr">
                <span>总课时:</span>

                <span>{{ item.classNumTotal }}</span>
              </div>
            </template>
          </van-cell>
        </div>
      </div>

      <!-- 场地 -->
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">场地</div>
          <div @click="href('/ExaminationRoom')" class="more">
            全部场地({{ lengths }})
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="in-panel-place">
          <van-cell
            class="place-cell"
            center
            v-for="(item, i) in placelists"
            :key="i"
          >
            <!-- <template #icon>
              <div class="place-pic">
                <img :src="item.img" class alt />
              </div>
            </template>-->
            <template #title>
              <div class="place-head justify">
                <div class="pl-tit">{{ item.mc }}</div>
                <div class="pl-item">
                  {{ (item.km = 1 ? "科目二" : "科目三") }}
                </div>
              </div>
              <div class="place-foot justify">
                <div class="pl-ads">{{ item.dz }}</div>
                <div class="pl-km">{{ item.juli }}km</div>
              </div>
            </template>
          </van-cell>
        </div>
      </div>

      <!-- 简介 -->
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">简介</div>
        </div>
        <div class="in-panel-bd">
          <div class="jj-title">驾校信息</div>
          <div class="coach-intro">
            经营范围
            <span>{{ schoolDetails.jyfw }}</span>
          </div>
          <div class="coach-intro">
            联系电话
            <span class="val">{{ schoolDetails.phone }}</span>
          </div>
          <div class="coach-intro">
            驾校地址
            <span class="val">{{ schoolDetails.address }}</span>
          </div>
          <div class="coach-intro">
            平均分
            <span class="val">{{ schoolDetails.xj }}</span>
          </div>
          <div class="coach-intro">
            服务
            <span class="val">{{ schoolDetails.ffzl }}</span>
          </div>
          <div class="coach-intro">
            设施
            <span class="val">{{ schoolDetails.sspf }}</span>
          </div>
          <!-- <div class="coach-intro">
            核准机构：
            <span class="val">{{ schoolDetails.hzjg }}</span>
          </div>-->
          <!-- <div class="coach-intro">
            注册时间：
            <span class="val">{{ schoolDetails.zcsj }}</span>
          </div>
          <div class="coach-intro">
            统一社会信用代码：
            <span class="val">{{ schoolDetails.creditcode }}</span>
          </div>
          <div class="coach-intro">
            经营状态：
            <span class="val">{{ schoolDetails.busistatus }}></span>
          </div>-->
        </div>
        <div class="in-panel-bd" style="padding:0 15px;">
          <div class="in-panel-cell">
            <div class="cell-title">成立时间</div>
            <div class="cell-body">
              <div class="cell-time">{{ schoolDetails.clsj }}</div>
            </div>
          </div>
          <!-- <div class="in-panel-cell">
            <div class="cell-title">驾校规模</div>
            <div class="cell-body">
              <van-row class="att-rows">
                <van-col :span="12">
                  <img src="../../assets/att1.png" alt />
                  <p>车辆：100</p>
                </van-col>
                <van-col :span="12">
                  <img src="../../assets/att2.png" alt />
                  <p>教练：50</p>
                </van-col>
              </van-row>
            </div>
          </div>-->

          <!-- 考场资质 -->
          <div class="in-panel-cell">
            <div class="cell-title">考场资质</div>
            <div class="accessorial-service">
              <div>
                <img v-if="zykc" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>自有考场</p>
              </div>
              <div>
                <img v-if="ksks" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>科三跟科四同一天考</p>
              </div>
            </div>
          </div>

          <!-- 附加服务 -->
          <div class="in-panel-cell">
            <div class="cell-title">附加服务</div>
            <div class="accessorial-service">
              <!-- <div>
                <img v-if="aptitude" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>考场资质</p>
              </div>-->
              <div>
                <img v-if="optical" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>支持先学车后付费</p>
              </div>
              <div>
                <img v-if="schedule" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>支持按学时付费</p>
              </div>
              <div>
                <img v-if="loans" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>支持贷款学车</p>
              </div>
              <div>
                <img v-if="transfer" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>支持线上转学</p>
              </div>
              <div>
                <img v-if="onSale" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
                <p>优惠券</p>
              </div>
            </div>
          </div>

          <!-- 配套设施 -->
          <div class="in-panel-cell">
            <div class="cell-title">配套设施</div>
            <div class="dis">
              <van-row
                class="att-rows"
                v-for="(item, index) in facility"
                :key="index"
              >
                <van-col class="van_col" v-if="item == 1">
                  <img src="../../assets/att3.png" alt />
                  <p>食堂</p>
                </van-col>
                <van-col class="van_col" v-if="item == 2">
                  <img src="../../assets/att4.png" alt />
                  <p>班车</p>
                </van-col>
                <van-col class="van_col" v-if="item == 3">
                  <img src="../../assets/att5.png" alt />
                  <p>免费WIFI</p>
                </van-col>
                <van-col class="van_col" v-if="item == 4">
                  <img src="../../assets/att6.png" alt />
                  <p>商店</p>
                </van-col>
                <van-col class="van_col" v-if="item == 5">
                  <img src="../../assets/att7.png" alt />
                  <p>储物箱</p>
                </van-col>
                <van-col class="van_col" v-if="item == 6">
                  <img src="../../assets/att8.png" alt />
                  <p>网吧</p>
                </van-col>
                <van-col class="van_col" v-if="item == 7">
                  <img src="../../assets/att9.png" alt />
                  <p>咖啡厅</p>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="in-panel">
        <van-cell class="manager-cell" center icon="send-gift" title="掌握报考流程,助力轻松拿证"></van-cell>
      </div>
      <div class="in-panel">
        <van-cell class="manager-cell" center icon="shop" title="我是驾校,入驻一点通,经营史轻松"></van-cell>
      </div>-->
    </div>
    <div class="space-in"></div>
    <div class="in-tabbar">
      <van-button @click="href('/ChargEconsult')" type="primary" block>
        <van-icon name="phone-circle" />
        <span>免费咨询</span>
      </van-button>
      <van-button @click="href('/ApplyOnline')" type="primary" block plain>
        <van-icon name="comment-circle" />
        <span>在线报名</span>
      </van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import {
  schoolDetails,
  detalisRemark,
  detalisSite,
  DetailsBanks,
  Collection,
  CancelCollection
} from "../../assets/js/api/apply";
import { DoubleCounting, MyFavorite } from "../../assets/js/api/user.js";

import { baseURL } from "../../assets/js/config";
export default {
  data() {
    return {
      show: false,
      zykc: false, // 自有考场
      ksks: false, // 自由考场
      current: 0,
      length: "",
      banks: "", // 班型总量
      canshu: "",
      comment: [],
      lengths: [],
      commentList: [],
      schoolDetails: {},
      images: [],
      classlists: [],
      placelists: [],
      facility: [],
      AllBanks: [], // 全部班型
      baseURL: "", // 基础路径
      // aptitude:true,
      optical: false, // 先学车后付费
      schedule: false, // 支持按学时付费
      loans: false, // 支持贷款学车
      transfer: false, // 支持线上转学
      onSale: false, // 优惠券
      signUp: "", // 验证该学员是否 已经报名
      favorite: true, // 收藏取消
      precision: null, // 精度
      // 114.495438,38.040065
      dimensionality: null // 维度
    };
  },

  mounted() {
    console.log(
      "永久保存：" + localStorage.getItem("token"),
      "保存本地：" + sessionStorage.getItem("token")
    );
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    this.baseURL = baseURL;
    if (sessionStorage.getItem("jd")) {
      this.precision = sessionStorage.getItem("wd");
    }
    if (sessionStorage.getItem("wd")) {
      this.dimensionality = sessionStorage.getItem("wd");
    }
    // console.log(this.baseURL);
    schoolDetails(this.$route.params.lid).then(res => {
      console.log(res);
      this.schoolDetails = res.data;
      let facilitys = this.schoolDetails.ptss;
      this.facility = facilitys.split(",");
      // 附加服务
      let service = res.data.fjfw.split(",");
      for (let i = 0; i < service.length; i++) {
        if (service[i] === "1") {
          this.optical = true;
        }
        if (service[i] === "2") {
          this.schedule = true;
        }
        if (service[i] === "3") {
          this.loans = true;
        }
        if (service[i] === "4") {
          this.transfer = true;
        }
        if (service[i] === "5") {
          this.onSale = true;
        }
      }
      let qualification = res.data.kczz.split(",");
      // console.log(qualification);
      for (let i = 0; i < qualification.length; i++) {
        if (qualification[i] === "1") {
          this.zykc = true;
        }
        if (qualification[i] === "2") {
          this.ksks = true;
        }
      }
    });

    // 驾校详情评论
    detalisRemark(this.$route.params.lid).then(res => {
      this.comment = res.data;
      // console.log(this.comment);
      this.comment.xj = Number(this.comment.xj);
      // console.log(typeof this.comment.xj);
      // console.log(this.comment);
      let arr = res.data.jxpjlist;
      // console.log("arr:" + arr);
      for (let i = 0; i < arr.length; i++) {
        if (i < 3) {
          arr[i].ffzl = Number(arr[i].ffzl);
          this.commentList.push(arr[i]);
          // console.log(typeof this.commentList[i].xj);
        }
      }
      // console.log(this.commentList);

      this.value = Number(this.comment.xj);
      this.length = res.data.jxpjlist.length;
    });

    // 找驾校场地
    let obj = {
      code: this.$route.params.lid,
      jd: this.precision,
      wd: this.dimensionality
    };
    // console.log(obj);
    detalisSite(obj).then(res => {
      // console.log(res);
      let changDi = res.data;
      this.lengths = changDi.length;
      for (let i = 0; i < changDi.length; i++) {
        if (i < 3) {
          this.placelists.push(changDi[i]);
        }
      }
    });
    // 班型
    DetailsBanks(this.$route.params.lid).then(res => {
      // console.log(res.data);
      let allBanks = res.data;
      for (let i = 0; i < allBanks.length; i++) {
        this.AllBanks.push(allBanks[i].stageType);
      }
      let length = res.data;
      this.banks = length.length;
      // let a = 0;
      for (let i = 0; i < this.banks; i++) {
        if (i < 3) {
          // a++;
          // console.log(a);
          this.classlists.push(length[i]);
        }
        // return;
      }
    });

    // // 是否已经报名
    if (localStorage.getItem("token") || sessionStorage.getItem("token")) {
      DoubleCounting().then(res => {
        this.signUp = res.code;
        // console.log(res);
      });
      MyFavorite().then(res => {
        // console.log(res);
        let collect = res.data.list;
        for (let i = 0; i < collect.length; i++) {
          if (this.$route.params.lid == collect[i].docid) {
            this.favorite = false;
          }
        }
      });
    }
  },

  methods: {
    // 收藏和取消
    // 收藏
    enshrine() {
      // console.log("收藏");
      let obj = {
        title: this.schoolDetails.name,
        lb: "7",
        jgbh: this.schoolDetails.id,
        docid: this.schoolDetails.id
      };
      console.log(obj);
      Collection(obj).then(res => {
        console.log(res);
        if (res.code == 506) {
          Toast("重复收藏");
        }
        if (res.code == 0) {
          Toast.success("收藏成功");
          this.favorite = false;
        }
      });
    },
    // 取消收藏
    cancel() {
      CancelCollection(this.schoolDetails.id).then(res => {
        // console.log(res);
        if (res.code == 0) {
          Toast.success("取消成功");
          this.favorite = true;
        }
      });

      // console.log("取消收藏");
    },

    onChange(index) {
      this.current = index;
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    href(url, id) {
      if (url == "/BanksDetails") {
        // let lid = this.$route.params.lid;
        this.$router.push({
          path: `${url}/${id}`
        });
      } else if (url == "/ApplyOnline") {
        if (!localStorage.getItem("token")) {
          this.$router.push({ path: "/AuthCode" });
          return;
        }
        if (this.signUp === "") {
          Toast("网络繁忙");
          return;
        }
        if (this.signUp == 501) {
          let lid = this.$route.params.lid;
          this.$router.push({
            path: `${url}/${lid}/${id}`
          });
        } else {
          Toast.success("您已成功报名");
        }
      } else if (url == "/Cartography") {
        let jd = this.schoolDetails.jd;
        let wd = this.schoolDetails.wd;
        // console.log(jd, wd);
        this.$router.push({
          path: `${url}/${jd}/${wd}`
        });
      } else {
        let lid = this.$route.params.lid;
        this.$router.push({
          path: `${url}/${lid}`
        });
      }
    },

    // 点x关闭弹出层
    // occlude() {
    //   this.show = false;
    // },

    Phone(phone) {
      window.location.href = "tel://" + phone;
      // console.log(phone);
    },

    showPopup() {
      this.show = true;
    }
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>
<style></style>
